<template>
  <div class="register-wrapper">
    <div class="background-image" :style="{ backgroundImage: 'url(' + bgImage + ')' }"></div>

    <div class="header-logo">
      <img src="@/assets/logo.png" alt="Abcell Logo" class="logo-img">
      <span class="logo-title">Abcell 生物科技</span>
    </div>

    <div class="register-content">
      <div class="register-container">
        <h2 class="register-title">用户注册</h2>
        <form @submit.prevent="handleSubmit" method="post" class="register-form">
          <div class="form-group">
            <input
              type="text"
              v-model="form.username"
              placeholder="用户名"
              class="form-input"
              required
            >
          </div>

          <div class="form-group">
            <input
              type="text"
              v-model="form.real_name"
              placeholder="真实姓名"
              class="form-input"
              required
            >
          </div>

          <div class="form-group">
            <input
              type="tel"
              v-model="form.phone"
              placeholder="手机号码"
              class="form-input"
              @input="validatePhone"
              required
              pattern="[0-9]{11}"
            >
             <small class="hint-text" v-if="phoneError">{{ phoneError }}</small>
          </div>

          <div class="form-group">
            <input
              type="email"
              v-model="form.email"
              placeholder="电子邮箱"
              class="form-input"
              required
            >
          </div>

          <div class="gender-group">
            <label class="gender-label">
              <input
                type="radio"
                v-model="form.gender"
                value="1"
                class="role-radio"
                checked
              >
              <span class="gender-text">男</span>
            </label>
            <label class="gender-label">
              <input
                type="radio"
                v-model="form.gender"
                value="2"
                class="role-radio"
              >
              <span class="gender-text">女</span>
            </label>
          </div>

          <div class="role-group">
            <label
              v-for="role in roles"
              :key="role.value"
              class="role-label"
            >
              <input
                type="radio"
                v-model="form.role"
                :value="role.value"
                class="role-radio"
              >
              <span class="role-text">{{ role.label }}</span>
            </label>
          </div>

          <div class="form-group">
            <input
              type="password"
              v-model="form.password"
              placeholder="密码（至少8位字符）"
              class="form-input"
              required
              minlength="8"
            >
          </div>

          <div class="form-group">
            <input
              type="password"
              v-model="form.confirmPassword"
              placeholder="确认密码"
              class="form-input"
              required
            >
          </div>

          <button type="submit" class="register-btn">注 册</button>
          <div v-if="errorMessage" class="error-message">
            {{ errorMessage }}
          </div>
          <div class="footer-links">
            <span @click="handleLogin">已有账号？立即登录</span>
          </div>
        </form>
      </div>
    </div>

    <div class="register-footer">
      <p>©2025 Abcell 生物科技 | 版本 v2.1.0</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'RegisterPage',
  data () {
    return {
      phoneError: null,
      bgImage: require('@/assets/bg.png'),
      form: {
        username: '',
        password: '',
        confirmPassword: '',
        real_name: '',
        phone: '',
        email: '',
        gender: '1',
        role: '1'
      },
      errorMessage: '',
      roles: [
        { value: 1, label: '普通用户' },
        { value: 2, label: '实验室管理员' },
        { value: 3, label: '系统管理员' }
      ]
    }
  },
  methods: {
    async handleSubmit () {
      if (this.form.password !== this.form.confirmPassword) {
        this.$message.error('两次输入的密码不一致！')
        return
      }

      try {
        const response = await axios.post('http://localhost:8000/api/auth/register/', {
          username: this.form.username,
          password: this.form.password,
          real_name: this.form.real_name,
          phone: this.form.phone,
          email: this.form.email,
          gender: this.form.gender,
          role: this.form.role
        }, {
          headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
          }
        })

        alert(`注册成功！${response.data.message}`)
        await this.$router.push('/')
      } catch (error) {
        console.error('注册错误详情:', error.response) // 添加这行查看完整错误
        if (error.response) {
          // 显示后端返回的详细错误信息
          const errMsg = error.response.data.message ||
                    (error.response.data.errors ? JSON.stringify(error.response.data.errors) : '注册失败')
          this.$message.error(errMsg)
        } else {
          this.$message.error(error.message || '注册失败')
        }
      }
    },
    handleLogin () {
      this.$router.push('/')
    },
    validatePhone () {
      const phoneRegex = /^1[3456789]\d{9}$/
      if (!phoneRegex.test(this.form.phone)) {
        this.phoneError = '请输入正确的手机号码'
      } else {
        this.phoneError = null
      }
    }
  }
}
</script>

<style scoped>
.register-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.header-logo {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  z-index: 1;
}

.logo-img {
  height: 32px;
  margin-right: 10px;
}

.logo-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.register-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  padding-right: 25%;
}

.register-container {
  width: 320px; /* 比登录框缩小20px */
  padding: 25px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.register-title {
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  font-size: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.form-group {
  margin-bottom: 5px; /* 比登录框间距缩小3px */
}

.form-input {
  width: 90%;
  padding: 10px 14px; /* 比登录框缩小1px */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  font-size: 13px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.form-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.3);
}
.gender-group{
  display: flex;
  justify-content:space-around;
  margin: 6px 0; /* 比登录框间距缩小3px */
  gap: 6px; /* 比登录框间距缩小2px */
}
.gender-label {
  display: flex;

  padding: 5px 8px; /* 比登录框缩小2px */
  border-radius: 6px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
}
.gender-text {
  font-size: 10px;
  color: #fff;
}
.role-group {
  display: flex;
  justify-content: space-between;
  margin: 6px 0; /* 比登录框间距缩小3px */
  gap: 6px; /* 比登录框间距缩小2px */
}

.role-label {
  display: flex;
  align-items: center;
  padding: 5px 8px; /* 比登录框缩小2px */
  border-radius: 6px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
}

.role-radio {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
}

.role-radio:checked {
  background-color: #409EFF;
  border-color: #409EFF;
}

.role-radio:checked::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}

.role-text {
  font-size: 10px;
  color: #fff;
}

.register-btn {
  display: block;
  width: 100%;
  margin: 0 auto 12px; /* 比登录框间距缩小3px */
  padding: 9px; /* 比登录框缩小1px */
  background: linear-gradient(135deg, #67C23A, #85ce61);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(103, 194, 58, 0.3);
}

.register-btn:hover {
  background: linear-gradient(135deg, #85ce61, #67C23A);
}

.footer-links {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.footer-links span {
  cursor: pointer;
}

.register-footer {
  position: absolute;
  bottom: 15px; /* 比登录框缩小5px */
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
</style>
